    <template>
         <div id="contain">
             <div id="regist">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <!-- 后台管理中心 -->
                    <div class="regist_login">
                     <!-- <el-button>登录</el-button><el-button>注册</el-button> -->
                     <router-link to="Login">登录</router-link>&nbsp;&nbsp;<router-link to="Regist"> 注册</router-link>
                    </div>
                     <el-form-item label="姓名" prop="name">
                        <el-input v-model.number="ruleForm.name"></el-input>
                        <!-- <el-input v-model="admin.aAname"></el-input> -->
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                         <el-input  v-model="ruleForm.pass" show-password autocomplete="off"></el-input>
                         <!-- <el-input type="password" v-model="ruleForm.pass" autocomplete="off" ></el-input> -->
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <!-- <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input> -->
                          <el-input  v-model="ruleForm.checkPass" show-password autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>
                      <el-form-item label="手机号" prop="tel">
                        <!-- <el-input v-model="admin.aPhonenum"></el-input> -->
                        <el-input v-model.number="ruleForm.tel"></el-input>
                    </el-form-item>
                      <el-form-item label="工号" prop="idNum">
                        <!-- <el-input v-model="admin.aJobnum"></el-input> -->
                        <el-input v-model="ruleForm.idNum"></el-input>
                    </el-form-item>
                     <el-form-item label="验证码" prop="check">
                        <el-input class="yzm" placeholder="输入验证码" v-model="inputPass"> </el-input> <el-button plain  v-show="show" @click="getCode()">获取验证码</el-button> 
                            <span v-show="!show" class="count">{{count}}</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
             </div>
         </div>
    </template>
    
    <script>
      export default {
    data() {
        var checkName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('姓名不能为空'));
        }
         callback();
      };
       var checkEmail = (rule, value, callback) => {
        const emailReg=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
        if (!value) {
          return callback(new Error('email不能为空'));
        }
        setTimeout(() => {
		        if (emailReg.test(value)) {
		          callback()
		        } else {
		          callback(new Error('邮箱格式不正确'))
		        }
		    }, 100); 
      };
         var checkTel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('电话号码不能为空'));
        }else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          };
      };
      }
       var checkId = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('工号不能为空'));
        }
 
         callback();
      };
       var checkYzm = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
     
         callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
         show: true,
         count: "",
         timer: null,   
         inputPass:'',
         admin:{
           aAname:'',
           aPassword:'',
           aJobnum:'',
           aPhonenum:''
         },
            yzmm:'',
         ruleForm: {
          pass: '',
          checkPass: '',
          name:'',
          email:'',
          tel:'',
          idNum:'',
          astatus:'true'
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' },
            { min: 5, message: '长度在不能小于5个字符' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          // age: [
          //   { validator: checkAge, trigger: 'blur' }
          // ],
           name: [
            { validator: checkName, trigger: 'blur' }
          ],
           email: [
            { validator: checkEmail, trigger: 'blur' }
          ],
            tel: [
            { validator: checkTel, trigger: 'blur' }
          ],
          idNum: [
            { validator: checkId, trigger: 'blur' }
          ],
           yzmm: [
            { validator: checkYzm, trigger: 'blur' }
          ]

        }
      };
    },
    methods: {
      submitForm(formName) {
           this.$http.post("http://"+this.GLOBAL.ipAddress+":8080/admin/comPass?inputPass="+this.inputPass)
        .then(function(data){
          // console.log(data.bodyText)
               if(data.bodyText=="ok"){
                 console.log(this.ruleForm)
                  this.$http.post("http://"+this.GLOBAL.ipAddress+":8080/admin/regist",this.ruleForm)
                  .then(function(data){
                     console.log(data.bodyText)
                  if(data.bodyText=="okk"){
                 
                    this.$router.push({path:'/Login'})
                  }
                 else {
                  console.log('注册失败');
               }});
             }
           else
               alert("验证码有误");
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       getCode(){
      this.$http.get("http://"+this.GLOBAL.ipAddress+":8080/admin/getPass").then(function(data) {
        // this.pass = data.body;
        // console.log(data.body);
        // alert(data.body)
        });
      const TIME_COUNT = 60;
      if (!this.timer) {
      this.count = TIME_COUNT;
      this.show = false;
      this.timer = setInterval(() => {
      if (this.count > 0 && this.count <= TIME_COUNT) {
      this.count--;
      } else {
      this.show = true;
      clearInterval(this.timer);
      this.timer = null;
      }
      }, 1000);
      }
},
    },
  }
    </script>
    
    <style>
  
    #regist{
        margin-left: 400px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-top: 65px;
        padding-right: 70px;
        text-align: center;
        height: 500px;
        width: 400px;
        background-color: white;
        opacity: 0.6;
        position: relative;
       border-radius: 8px;
    }
    .yzm{
      width: 175px;
      /* text-align: left; */
      /* padding-left: 0px; */
      margin-left: 0px;
    }
    .regist_login{
      margin-bottom: 15px;
      position: absolute;
      left: 50px;
      top: 25px;
      font-weight: 700;
      color: black;
    }
    .active{
      color: brown;
    }
  a{
    text-decoration: none;
  }
    </style>

